<template>
	<div class="components-container">
		<split-pane :min-percent='20' :default-percent='16' split="vertical">
			<template slot="paneL">
				<div class="left-container container-shadow">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item label="">
							<el-input placeholder="输入关键字进行过滤" v-model="filterGroupText">
							</el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="getGroupList" circle><i class="el-icon-search" />
							</el-button>
						</el-form-item>
					</el-form>
					<el-tree style="width: 80%;" class="filter-tree" ref="groupTree" :data="groupList" :props="groupProps"
						default-expand-all show-checkbox :filter-node-method="filterGroupNode"
						@check-change="groupSelected" :highlight-current="groupProps.groupHighlight"
						:check-strictly="groupProps.checkStrictly" node-key="dictGroupKey">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<span>
								{{ data.dictGroupValue }}
							</span>
						</span>
					</el-tree>
				</div>
			</template>
			<template slot="paneR">
				<div class="container-shadow" style="height: 100%;padding: 0.5rem;">
					<el-form :inline="true" label-width="120px" :model="searchFrom" class="demo-form-inline">
						<el-form-item label="字典项的key">
							<el-input v-model="searchFrom.dictKey" placeholder="字典项的key"></el-input>
						</el-form-item>
						<el-form-item label="字典项的value">
							<el-input v-model="searchFrom.dictValue" placeholder="字典项的value"></el-input>
						</el-form-item>
						<el-form-item label="字典项的英文">
							<el-input v-model="searchFrom.dictValueEn" placeholder="字典项的英文"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="字典项的排序">
							<el-input v-model="searchFrom.dictValueOrder" placeholder="字典项的排序"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="是否启用">
							<el-input v-model="searchFrom.dictEnable" placeholder="是否启用"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="所属分组的key">
							<el-input v-model="searchFrom.dictGroupKey" placeholder="所属分组的key"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="所属分组的value">
							<el-input v-model="searchFrom.dictGroupValue" placeholder="所属分组的value"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="所属分组的英文value">
							<el-input v-model="searchFrom.dictGroupValueEn" placeholder="所属分组的英文value"></el-input>
						</el-form-item>
						<el-form-item v-if="moreSearch" label="分组的排序">
							<el-input v-model="searchFrom.dictGroupOrder" placeholder="分组的排序"></el-input>
						</el-form-item>
						<el-form-item label="更多">
							<el-switch v-model="moreSearch" @change="moreChange">
							</el-switch>
						</el-form-item>
						<el-form-item style="float: right;">
							<el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
							<el-button type="primary" @click="addDict"><i class="el-icon-plus" />新增</el-button>
						</el-form-item>
					</el-form>
					<el-table v-loading="listLoading" stripe max-height="700px" :data="list" border fit highlight-current-row style="width: 100%">
						<el-table-column v-for="item in tableColumn" :key="item.field" align="center" :label="item.title"
							:width="item.width">
							<template slot-scope="{row}">
								<template v-if="item.type == 'select'">
									<span>{{ translation[item.field][row[item.field]] }}</span>
								</template>
								<template>
									<span>{{ row[item.field] }}</span>
								</template>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="200px">
							<template slot-scope="scope">
								<el-button icon="el-icon-edit" type="primary" size="mini"
									@click="editDict(scope.$index, scope.row)">编辑</el-button>
								<el-button icon="el-icon-delete" size="mini" type="danger"
									@click="deleteDict(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination @size-change="pageSizeChange" @current-change="currentPageChange"
						:current-page="page.currentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="page.total" background>
					</el-pagination>
					<el-dialog width="42%" title="" :visible.sync="dictAddFormVisible" center>
						<div  slot="title" class="dialog-title">
							<div class="dialog-header">
							字典信息
							</div>
						</div>
						<dictEdit :dictInfo="dictInfo" />
						<div slot="footer" class="dialog-footer" style="border-top: 1px solid #dfe6ec ;">
							<div class="dialog-btn-top">
								<el-button type="danger" icon="el-icon-close" @click="dictAddFormVisible = false">取 消
								</el-button>
								<el-button icon="el-icon-check" type="primary" @click="save">保 存</el-button>
							</div>
						</div>
					</el-dialog>
				</div>
			</template>
		</split-pane>
	</div>
</template>
<script>
	import splitPane from 'vue-splitpane'
	import request from '@/utils/request'
	import dictEdit from '@/views/system/dict/dict-edit.vue'
	export default {
		name: 'dictList',
		components: {
			splitPane,
			dictEdit
		},
		data() {
			return {
				//更多检索条件
				moreSearch: false,
				//弹窗是否可见
				dictAddFormVisible: false,
				//搜索表单
				searchFrom: {
					pageNo: 1,
					pageSize: 10
				},
				//表的下拉数据
				tableList: [],
				//正在编辑的用户信息
				dictInfo: {
					dictKey: "",
					dictValue: "",
					dictValueEn: "",
					dictValueOrder: "",
					dictEnable: "",
					dictGroupKey: "",
					dictGroupValue: "",
					dictGroupValueEn: "",
					dictGroupOrder: "",
				},
				//表头
				tableColumn: [{
						field: 'dictKey',
						title: '字典项的key',
					},
					{
						field: 'dictValue',
						title: '字典项的value',
					},
					{
						field: 'dictValueEn',
						title: '字典项的英文',
					},
					{
						field: 'dictValueOrder',
						title: '字典项的排序',
					},
					{
						field: 'dictEnable',
						title: '是否启用',
					},
					{
						field: 'dictGroupKey',
						title: '所属分组的key',
					},
					{
						field: 'dictGroupValue',
						title: '所属分组的value',
					},
					{
						field: 'dictGroupValueEn',
						title: '所属分组的英文value',
					},
					{
						field: 'dictGroupOrder',
						title: '分组的排序',
					},
				],
				//数据转译
				translation: {
					dictId: {},
				},
				//所有的下拉选项
				options: {
					dictId: [],
				},
				//查询方式列表
				listLoading: false,
				//数据列表
				list: null,
				//分页相关参数
				page: {
					pageSizes: [10, 20, 50, 100],
					pageSize: 10,
					total: 0,
					currentPage: 1
				},
				//分组
				filterGroupText: "",
				//分组编辑页是否显示
				groupEditFormVisible: false,
				//分组信息
				groupInfo: {},
				//分组列表
				groupList: [],
				//分组树配置
				groupProps: {
					children: 'children',
					label: 'label',
					groupHighlight: true,
					checkStrictly: true,
					filterText: ""
				},
			}
		},
		//页面初始化加载
		created() {
			this.getList();
			this.getGroupList();
		},
		watch: {
			//角色搜索
			filterGroupText(val) {
				this.$refs.groupTree.filter(val);
			}
		},
		methods: {
			//查询列表
			getList() {
				this.searchFrom['pageNo'] = this.page.currentPage
				this.searchFrom['pageSize'] = this.page.pageSize
				request({
					url: '/system/dict/queryByPage',
					method: 'post',
					data: this.searchFrom
				}).then(response => {
					this.list = response.data.list
					this.page.total = response.data.total
					this.page.currentPage = response.data.pageNum
				})
			},
			//保存用户信息
			save() {
				var url = '/system/dict/insert';
				if (this.dictInfo.dictId) {
					url = '/system/dict/update';
				}
				request({
					url: url,
					method: 'post',
					data: this.dictInfo
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.dictAddFormVisible = false;
				})
			},
			//添加
			addDict() {
				this.dictInfo = {};
				this.dictAddFormVisible = true;
			},
			//编辑
			editDict(index, row) {
				this.dictInfo = {
					dictKey: "",
					dictValue: "",
					dictValueEn: "",
					dictValueOrder: "",
					dictEnable: "",
					dictGroupKey: "",
					dictGroupValue: "",
					dictGroupValueEn: "",
					dictGroupOrder: "",
				}
				this.dictInfo = row;
				this.dictAddFormVisible = true;
			},
			//删除用户
			deleteDict(index, row) {
				this.$confirm('是否删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.confirmDelete(row)
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//确认删除操作
			confirmDelete(row) {
				var url = '/system/dict/delete';
				request({
					url: url,
					method: 'post',
					data: row
				}).then(response => {
					const h = this.$createElement;
					this.$notify({
						title: '提示信息',
						message: h('i', {
							style: 'color: teal'
						}, response.message)
					});
					this.getList();
					this.dictAddFormVisible = false;
				})
			},
			//分页数量修改
			pageSizeChange(pageSize) {
				this.page.pageSize = pageSize;
				this.getList();
			},
			//页码修改
			currentPageChange(page) {
				this.page.currentPage = page;
				this.getList();
			},
			//更多查询条件
			moreChange() {
				this.searchFrom["dictKey"] = null;
				this.searchFrom["dictValue"] = null;
				this.searchFrom["dictValueEn"] = null;
				this.searchFrom["dictValueOrder"] = null;
				this.searchFrom["dictEnable"] = null;
				this.searchFrom["dictGroupKey"] = null;
				this.searchFrom["dictGroupValue"] = null;
				this.searchFrom["dictGroupValueEn"] = null;
				this.searchFrom["dictGroupOrder"] = null;
			},
			//获取分组
			getGroupList() {
				request({
					url: '/system/dict/queryByGroup',
					method: 'post'
				}).then(response => {
					this.groupList = response.data
				})
			},
			//分组选择
			groupSelected(data, checked) {
				var groupCheckedList = this.$refs.groupTree.getCheckedKeys();
				if (checked) {
					this.groupClear(data, checked);
				}
				if (!checked && groupCheckedList.length > 0) {
					return;
				}
				if (checked) {
					this.searchFrom.dictGroupKey = data.dictGroupKey
				} else {
					this.searchFrom.dictGroupKey = ""
				}
				this.getList();
			},
			//清除其他选中的角色
			groupClear(currentNode, checked) {
				var groupCheckedList = this.$refs.groupTree.getCheckedKeys();
				for (var i = 0; i < groupCheckedList.length; i++) {
					if (checked && groupCheckedList[i] != currentNode.dictGroupKey) {
						this.$refs.groupTree.setChecked(groupCheckedList[i], false);
					}
				}
			},
			//筛选
			filterGroupNode(value, data) {
				if (!value) {
					return true;
				}
				return data.dictGroupValue.indexOf(value) !== -1;
			},
		}
	}
</script>
<style>

</style>
